<html>
<head>
	<meta charset="utf-8">
	<title>焦点图</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li,ol{list-style:none;}
		#box{width:760px;height:281px;overflow:hidden;margin:20px auto;position:relative;}
		#box ul{position:absolute;}
		#box ul li{}
		#box ul li img{width:100%; display:block;}
		#box ol{position:absolute;bottom:5px;right:10px;}
		#box ol li{float:left;margin-right:5px;color:#fff;width:20px;height:20px;background:rgba(255,102,0,0.5);text-align:center;line-height:20px;}
		#box ol li.active{background:rgba(102,102,102,0.5);}
	</style>
</head>
<body>
<div id='box'>
	<ul>
		<li><img src="images/01.jpg" alt=""></li>
		<li><img src="images/02.jpg" alt=""></li>
		<li><img src="images/03.jpg" alt=""></li>
		<li><img src="images/04.jpg" alt=""></li>
		<li><img src="images/05.jpg" alt=""></li>

	</ul>
	<ol>
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ol>
	<script type="text/javascript" src='move.js'></script>
	<script type="text/javascript">
	var uul = document.getElementsByTagName('ul')[0];
	var uli = uul.getElementsByTagName('li');

	var uol = document.getElementsByTagName('ol')[0];
	var oli = uol.getElementsByTagName('li');

	var uliHeight = uli[0].offsetHeight;
	var iNow = 0;
	var iNow2 = 0;
	var timer = null;

	var oBox = document.getElementById('box');
	for(var i =0 ;i<oli.length;i++){
		oli[i].index = i;
		oli[i].onmouseover = function(){
			for(var i = 0;i<oli.length;i++){
				oli[i].className = '';
			}
			iNow = this.index;
			this.className = 'active';
			move(uul).set('top',-this.index*uliHeight).end();
		}
	}
	timer = setInterval(aRun,2000);
	function aRun(){
		if(iNow == 0){
			uli[0].style.position = 'static';
			uul.style.top = '0';
			iNow2 = 0;
			console.log("inow=0");
			//iNow++;
		}
		if(iNow == oli.length-1){
			iNow = 0;
			uli[0].style.position = 'relative';
			uli[0].style.top = uli.length*uliHeight+'px';
			
		}else{
			iNow++;	
		}
		iNow2++;
		//console.log(iNow2);
		for(var i = 0;i<oli.length;i++){
			oli[i].className = '';
		}
		move(uul).set('top',-iNow2*uliHeight).end();
		oli[iNow].className='active';
	}
	oBox.onmouseover = function(){
		clearInterval(timer);
	}
	oBox.onmouseout = function(){
		timer = setInterval(aRun,2000);
	}
	</script>
</div>
</body>
</html>